<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-divider type="primary">this is bar</ph-divider>
        <ph-divider type="success">this is <a>success</a> bar</ph-divider>
        <ph-divider type="info">this is <a>info</a> bar</ph-divider>
        <ph-divider align="left" type="warning"
          >this is <a>warning</a> bar</ph-divider
        >
        <ph-divider type="danger">this is <a>danger</a> bar</ph-divider>
        <ph-divider>this is <a>danger</a> bar</ph-divider>
        <ph-pretty>{{ demo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhDivider, PhTab, PhTabPanel, PhView } from "@/index";
import * as Data from "../data/divider";
export default defineComponent({
  components: { PhDivider, PhTab, PhTabPanel, PhView },
  setup() {
    return { ...Data };
  },
});
</script>
